/* 主视图 */
<template>
  <div class="layout">
    <Layout>
      <Header class="header">
        <com-header></com-header>
      </Header>
      <Layout>
        <Sider breakpoint="md" collapsible class="sider" width="280" v-model="isCollapsed">
          <com-sider></com-sider>
        </Sider>

        <Content style=" min-height: 85vh">
          <div style="background:#eee;padding: 20px">
            <Card>
              <router-view></router-view>
            </Card>
          </div>
        </Content>
      </Layout>
      <Footer class="footer">
        <div>
          Copyright © 2018 www.anhuanjia.com All Rights Resreved | 京ICP备13038154号-6 安环家荣誉出品
        </div>
      </Footer>
    </Layout>
  </div>
</template>

<script>
  import comSider from './component/Sider.vue'
  import comHeader from './component/Header.vue'
  export default {
    components: {
      comSider,
      comHeader
    },
    data() {
      return {
        isCollapsed: false,
      }
    },

  }
</script>

<style lang="less">
  @import url('../../assets/css/base.less');

  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .ivu-layout-header {
    width: 100%;
    background: #ffffff !important;

    img {
      width: 100%;
    }
  }

  .ivu-layout-sider-trigger {
    display: none;
  }

  .ivu-layout-sider-children {
    border-right: 3px solid #2d8cf0;
  }

  .footer {
    div {
      text-align: center;
    }
  }
</style>